<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-08-11 11:31:57
 * @LastEditors: 商晓彬
 * @LastEditTime: 2022-02-14 11:50:13
-->
<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="add modal fade" tabindex="-1" role="dialog"
    aria-labelledby="createOrEditModal" aria-hidden="true" [config]="{backdrop: 'static', keyboard: !saving}">
    <div style="width:800px!important;margin: 1.75rem auto;">
        <div class="modal-content">
            <form *ngIf="active" #bopForm="ngForm" novalidate autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span>{{title}}</span>
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')"
                        [disabled]="saving">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="height: 630px!important;overflow: auto;">
                    <div class="p-formgroup-inline" style="display: flex;">
                        <div class="flex">
                            <label style="margin-top: 5px;">变更类型*</label>
                            <p-dropdown [disabled]="title == '规程变更查看'" required name="changeType"
                                #changeTypeSelect="ngModel" placeholder="请选择变更类型" [options]="changeTypeOption"
                                [(ngModel)]="form.modifyType">
                                <ng-template let-select pTemplate="selectedItem">
                                    <span
                                        style="vertical-align:middle; margin-left: .5em;width:175px;">{{select.label}}</span>
                                </ng-template>
                                <ng-template let-select pTemplate="select">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                        <div style="font-size:14px;float:right;margin-top:4px;width: 175px; ">
                                            {{select.label}}
                                        </div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                            <validation-messages [formCtrl]="changeTypeSelect"></validation-messages>
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;margin-left: 100px;">变更原因*</label>
                            <p-dropdown [disabled]="title == '规程变更查看'" required name="reason" #reasonSelect="ngModel"
                                [options]="reasonOption" placeholder="请选择变更原因" [(ngModel)]="form.modifyReason">
                                <ng-template let-select pTemplate="selectedItem">
                                    <span
                                        style="vertical-align:middle; margin-left: .5em;width:175px;">{{select.label}}</span>
                                </ng-template>
                                <ng-template let-select pTemplate="select">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                        <div style="font-size:14px;float:right;margin-top:4px;width: 175px; ">
                                            {{select.label}}
                                        </div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                            <validation-messages [formCtrl]="reasonSelect"></validation-messages>
                        </div>
                    </div>
                    <div class="p-formgroup-inline" style="display: flex;margin-top: 20px;">
                        <div class="flex">
                            <label style="margin-top: 5px;width: 58.02px;">型号*</label>
                            <p-dropdown [disabled]="title == '规程变更查看' || title == '变更修改'" filter="true" name="module" #modelInput="ngModel"
                                [options]="moduleOptions" placeholder="请选择型号" [(ngModel)]="form.modelId"
                                emptyFilterMessage="暂无数据" (onChange)="onChange($event)" required>
                                <ng-template let-item pTemplate="selectedItem">
                                    <span
                                        style="vertical-align:middle; margin-left: .5em;width: 117px;">{{item.label}}</span>
                                </ng-template>
                                <ng-template let-model pTemplate="item">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                        <div style="font-size:14px;float:right;margin-top:4px;width: 117px;">
                                            {{model.label}}
                                        </div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                            <validation-messages [formCtrl]="modelInput"></validation-messages>
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;width: 58.02px;margin-left: 100px;">发次*</label>
                            <p-dropdown [disabled]="title == '规程变更查看' || title == '变更修改'" filter="true" name="sendTime"
                                [options]="sendTimeOptions" placeholder="请选择发次" [(ngModel)]="form.lotNoId"
                                emptyFilterMessage="暂无数据" #lotNoInput="ngModel" required>
                                <ng-template let-item pTemplate="selectedItem">
                                    <span
                                        style="vertical-align:middle; margin-left: .5em;width: 117px;">{{item.label}}</span>
                                </ng-template>
                                <ng-template let-model pTemplate="item">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                        <div style="font-size:14px;float:right;margin-top:4px;width: 117px;">
                                            {{model.label}}
                                        </div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                            <validation-messages [formCtrl]="lotNoInput"></validation-messages>
                        </div>
                    </div>
                    <div class="p-formgroup-inline" style="margin-top: 20px;display: flex;">
                        <h4>关联规程清单：</h4>
                        <div class="flex">
                            <label style="margin-top: 5px;">规程编号：</label>
                            <input [disabled]="title == '规程变更查看'" style=" width:150px;height: 35px;margin-left: 10px;"
                                id="code" name="code" type="text" [(ngModel)]="form.techniqueNumber" />
                        </div>
                        <div class="flex" style="margin-left: 5px;">
                            <label style="margin-top: 5px;">规程名称：</label>
                            <input [disabled]="title == '规程变更查看'" style=" width:150px;height: 35px;margin-left: 10px;"
                                id="rulesName" name="rulesName" type="text" [(ngModel)]="form.techniqueName" />
                        </div>
                        <p-button *ngIf="title != '规程变更查看'&& title != '变更修改'" style="margin: 0px 5px;" (click)="getTableList()" label="查询"></p-button>
                        <p-button *ngIf="title != '规程变更查看'&& title != '变更修改'" (click)="resert()" label="重置"></p-button>
                    </div>
                    <div class="row align-items-center" style="margin-top: 20px;">
                        <div class="primeng-datatable-container">
                            <p-table #dataTable [value]="primengTableHelper.records"
                                rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false"
                                [lazy]="true" [scrollable]="true" ScrollWidth="100%"
                                [responsive]="primengTableHelper.isResponsive"
                                [resizableColumns]="primengTableHelper.resizableColumns" [(selection)]="selectRow"
                                dataKey="id">
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th style="width: 3em"></th>
                                        <th style="width: 150px">规程编号</th>
                                        <th style="width: 150px">规程名称</th>
                                        <th style="width: 150px">图号</th>
                                        <th style="width: 150px">子版本</th>
                                        <th style="width: 150px">状态</th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                                    <tr>
                                        <td style="width: 3em">
                                            <p-tableRadioButton [value]="record" [disabled]="record.techStatus != '未导出'"></p-tableRadioButton>
                                        </td>
                                        <td style="width: 150px">{{record.techniqueNumber}}</td>
                                        <td style="width: 150px">{{record.techniqueName}}</td>
                                        <td style="width: 150px">{{record.moduleCode}}</td>
                                        <td style="width: 150px">{{record.edition}}</td>
                                        <td style="width: 150px">{{record.techStatus}}</td>
                                    </tr>
                                </ng-template>
                            </p-table>
                            <div class="primeng-paging-container">
                                <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                    (onPageChange)="getTableList($event)"
                                    [totalRecords]="primengTableHelper.totalRecordsCount"
                                    [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                </p-paginator>
                                <span class="total-records-count">
                                    {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="p-formgroup-inline">
                        <div class="flex">
                            <label style="margin-top: 5px;">变更维护*</label>
                            <button style="margin-left: 20px;" pButton type="button" (click)="toMaintain()" label="维护"
                                class="ui-button-raised"></button>
                        </div>
                    </div>
                    <div class="p-formgroup-inline" style="margin-top: 20px;">
                        <label style="margin-top: 5px;">制品处理意见：</label>
                        <textarea [disabled]="title == '规程变更查看'" name="opinion" rows="2" cols="100" pInputTextarea
                            [(ngModel)]="form.productOpinions"></textarea>
                    </div>
                    <div class="p-formgroup-inline" style="margin-top: 20px;">
                        <label style="margin-top: 5px;">变更内容：</label>
                        <textarea [disabled]="title == '规程变更查看'" name="content" rows="2" cols="100" pInputTextarea
                            [(ngModel)]="form.content"></textarea>
                    </div>
                    <div class="p-formgroup-inline" style="margin-top: 20px;">
                        <label style="margin-top: 5px;">备注：</label>
                        <textarea [disabled]="title == '规程变更查看'" name="remark" rows="2" cols="100" pInputTextarea
                            [(ngModel)]="form.remark"></textarea>
                    </div>
                </div>
                <div class="modal-footer" style="justify-content: center;" *ngIf="title != '规程变更查看'">
                    <button pButton [disabled]="!bopForm.form.valid" type="button" label="保存" (click)="save()"
                        style="margin-left: 0.5rem"></button>
                    <button pButton [disabled]="!bopForm.form.valid" type="button" label="保存送审"
                        (click)="saveToapproval()" style="margin-left: 0.5rem"></button>
                </div>
            </form>
            <!-- 变更维护 -->
            <maintain #maintain (modalSave)="backMaintain($event)" [parentrow]="selectRow" [changeId]="changeId"
                [title]="sonTitle">
            </maintain>
            <!-- 变更维护查看 -->
            <app-watch-maintain #WatchMaintainComponent [parentInfo]="selectRow"></app-watch-maintain>
            <!-- 保存送审 -->
            <app-produre-approval #ProdureApprovalComponent [editData]="form" [title]="maintTitle"
                (modalSave)="backApproval($event)"></app-produre-approval>
        </div>
    </div>
</div>